<template>
	<view class="chat">
		<!-- <u-navbar class="nav-bar" title="AI绘画" :bgColor="bcg">
		</u-navbar> -->
		<scroll-view :style="{height: `calc(100vh - 450rpx)`}" id="scrollview" scroll-y="true" :scroll-top="scrollTop"
			class="scroll-view">
			
			<!-- <view class="center-title">
				<view @click="returnPage"><u-icon name="arrow-left" color="#4a4a4a" size="20"></u-icon></view>
				<view style="position: absolute;left: 50%; transform: translateX(-50%);">AI绘画</view>
				<view></view>
			</view> -->


			<!-- 聊天主体 -->
			<view id="msglistview" class="chat-body">
				<!-- 聊天记录 -->
				
				<view class="item Ai" v-if="moren">
					<!-- 头像 -->
					<image class="avatar" src="https://oss.aimlt.com/webui-static/aiyunyi-app/icon/logo.png">
					</image>
					<!-- 文字内容 -->
					<view class="content left" v-if="moren">
						
						<view class="moren-text">快来试试AI生成图片吧！</view>
						<view class="moren-text">AI生图步骤：</view>
						<view class="moren-text">输入描述关键词——选择风格——生成高清图片——保存</view>
					</view>
				</view>
						
						
						
				<view v-for="(item,index) in msgList" :key="index">
					<!-- 自己发的消息 -->
					<view class="item self" v-if="item.userContent != ''">
						<!-- 文字内容 -->
						<view class="content right">
							{{item.userContent}}
						</view>
						<!-- 头像 -->
						<image style="background: #F6DED0;" class="avatar" :src="headimg?headimg: 'https://oss.aimlt.com/webui-static/aiyunyi-app/icon/moren.png'">
						</image>
					</view>
					<!-- 机器人发的消息 -->
					<view class="item Ai" v-if="item.botContent != ''">
						<!-- 头像 -->
						<image class="avatar" src="https://oss.aimlt.com/webui-static/aiyunyi-app/icon/logo.png">
						</image>
						<!-- 文字内容 -->
						<view>
							<view class="content left" v-for="(ele, indexs) in item.imageList" :key="indexs">
								<u--image height='450rpx' width="450rpx" border="16rpx" mode="aspectFit" :src="ele.url" @click="lookImg(ele.url)">
									<view slot="error" style="font-size: 24rpx;">
										<view><u-icon name="photo" color="#909193" size="28"></u-icon>
										</view>
										<view>加载失败</view>
									</view>
									<template v-slot:loading>
										<u-loading-icon color="#FF6005"></u-loading-icon>
									</template>
								</u--image>
								<!-- <image mode="aspectFit" class="imge" :src="ele.url" @click="lookImg(ele.url)"></image> -->
								<view class="img-btn">
									<view class="left-btn">
										<view class="btn" @click="shareImg(ele,indexs)">分享</view>
										<view class="btn repeat" @click="handleSend('center')">重新生成</view>
									</view>
									<view class="btn" @click="saveImg(ele,indexs)">保存</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</scroll-view>
		<!-- 底部消息发送栏 -->
		<!-- 用来占位，防止聊天消息被发送框遮挡 -->
		<view class="chat-bottom" :style="'bottom:'+bottomHeight1+'px'">
			<view class="send-msg">
				<!-- 尺寸 -->
				<view class="select">
					<view class="size" @click="toggle('bottom', 'size')">
						<view class="size-text">尺寸</view>
						<view class="size-img">
							<image :style="{height: `${imgHeight}rpx`, width: `${imgWidth}rpx`}" class="img-url"
								:src="localIconSrc(imageUrl)"></image>
							<view class="hengtu">{{ sizeText }}</view>
							<uni-icons type="right" size="14"></uni-icons>
						</view>
					</view>
					<!-- 张数 -->
					<view class="select">
						<view class="size" @click="toggle('bottom', 'number')">
							<view class="size-text">张数</view>
							<view class="size-img">
								<view class="hengtu">{{ number }}</view>
								<uni-icons type="right" size="14"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="line"></view>

				<!-- <view class="move-area"> -->
				<view class="move-list">
					<view
						class="move-item"
						v-for="(item, index) in styleList"
						:key="index"
						:style="{ 'border': styleActive == index ? '1px solid #ff6005': '1px solid transparent'}"
						:class="styleActive == index ? 'styleActive' : ''"
						@click="handleStyle(item, index)">
						<!-- <image class="item-img" :src="localImgSrc('3DAfter.png')"></image> -->
						<view :class="styleActive == index ? 'styleActive1' : 'move-text'">{{ item.text }}</view>
					</view>
				</view>
				<!-- </view> -->
				<view class="line"></view>

				<view class="uni-textarea" :style="'bottom:'+bottomHeight+'px'">
					<view class="inp">
						<u--textarea
							v-model="chatMsg"
							placeholder="请输入关键词"
							autoHeight
							:showConfirmBar="false"
							:adjustPosition="false"
							:fixed="true"
							@input="handleInput"
						></u--textarea>
					</view>
					<view @click="handleSend('center')" style="text-align: center;">
						<view class="send-btn">立即生成</view>
						<view class="xiaohao" v-if="freeNum !== 0">免费<text style="color: #ff6005;">{{ freeNum }}次</text></view>
						<view v-else class="xiaohao">本次消费<text style="color: #ff6005;">{{ colorNum }}支</text>颜料</view>
					</view>
				</view>

			</view>
		</view>


		<uni-popup ref="popup" background-color="#fff" :border-radius="bottom? '16rpx 16rpx 0 0' : '16rpx'">
			<view class="popup-content">
				<view class="order-type">
					<view class="type-text">{{ imageType }}</view>
					<view class="type-list" v-if="showSize">
						<view class="image-type" v-for="(item, index) in typeList" :key="index"
							@click="handleType(item, index)">
							<image class="img" :class="actived == index ? 'active': ''"
								:style="{height: `${item.height}rpx`, width: `${item.width}rpx`}"
								:src="localIconSrc(item.name)"></image>
							<view :class="actived == index ? 'active1': ''" class="type-text">{{ item.text }}</view>
						</view>
					</view>

					<view v-else class="num-type">
						<u-icon name="minus-circle" size="30" @click="handleMinus"></u-icon>
						<view style="width: 100%;">
							<slider
								:value="value"
								min="1"
								max="4"
								show-value
								block-size="28"
								activeColor="#ff6005"
								@change="sliderChange"
							/>
						</view>
						
						<u-icon name="plus-circle" size="30" @click="handlePlus"></u-icon>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup :is-mask-click="false" ref="popup1" background-color="#fff" :border-radius="bottom? '16rpx 16rpx 0 0' : '16rpx'">
		  <view class="popup-content1">
		  	<progress-circle
		  		ref="jindutiao"
		  		class="circle-progress"
		  		:progress="percent"
		  		:percent="percents"
		  		:text="text"
		  	></progress-circle>
		  </view>
		</uni-popup>
				
				
		<view class="look-box" v-if="imgUrl" >
			<movable-area scale-area>
				<movable-view direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4">
					<image mode="widthFix" :src="imgUrl" @click="imgUrl=''"></image>
				</movable-view>
			</movable-area>
		</view>
	</view>
</template>
<script>
	import progressCircle from '@/components/progress.vue'
	import {
		drawPaint,
		getDrawUrl,
		getRecordList
	} from '@/api/paint.js'
	import {
		getRefreshUser
	} from '@/api/wallet.js'
	import { getUserInfo } from '@/api/login.js'
	export default {
		components: {
			progressCircle
		},
		data() {
			return {
				imgUrl: "",
				//键盘高度
				keyboardHeight: 0,
				//底部消息发送高度
				bottomHeight: 10,
				bottomHeight1: 0,
				//滚动距离
				scrollTop: 0,
				userId: '',
				//发送的消息
				chatMsg: "",
				msgList: [
				],
				imageType: '尺寸',
				typeList: [{
						text: '方图',
						height: 96,
						width: 96,
						value: '1024*1024',
						name: 'fangtu.png'
					},
					{
						text: '横图',
						height: 96,
						width: 144,
						value: '1280*720',
						name: 'hentu.png'
					},
					{
						text: '竖图',
						height: 96,
						width: 70,
						value: '720*1280',
						name: 'shutu.png'
					}
				],
				showSize: true,
				actived: 0,
				sizeText: '方图',
				imgHeight: 48,
				imgWidth: 48,
				styleList: [
					// {
					// 	text: ' 默认',
					// 	value: 'auto'
					// },
					{
						text: ' 人像写真',
						value: 'portrait'
					},
					{
						text: ' 摄影',
						value: 'photography'
					},
					 {
						text: ' 3D卡通',
						value: '3d'
					},
					{
						text: ' 动画',
						value: 'anime'
					}, {
						text: ' 油画',
						value: 'oil'
					},
					{
						text: ' 水彩',
						value: 'watercolor'
					}, {
						text: ' 素描',
						value: 'sketch'
					},
					{
						text: ' 中国画',
						value: 'chinese'
					}, {
						text: ' 扁平插画',
						value: 'flat'
					}
				],
				styleActive: 0,
				number: 1, // 张数
				style: 'auto', // 风格
				size: '1024*1024', // 尺寸
				taskId: '',
				imageList: [],
				bottom: true,
				percent: 0,
				percents: 0,
				recordList: [],
				placeholderStyle: '',
				imageUrl: 'fangtu.png',
				text: '正在生成，请稍等',
				freeNum: 0,
				headimg: uni.getStorageSync('portrait'),
				bcg: 'transparent',
				moren: true,
				preChatMsg: '',
				isDrawMember: 0,
				value: 1
			}
		},
		updated() {
			//页面更新时调用聊天消息定位到最底部
			this.scrollToBottom();
		},
		computed: {
			colorNum() {
				// 计算数值的总和
				return this.number * 5;
			},
			windowHeight() {
				return this.rpxTopx(uni.getSystemInfoSync().windowHeight)
			},
			// 键盘弹起来的高度+发送框高度
			inputHeight() {
				return this.bottomHeight + this.keyboardHeight
				return this.bottomHeight1 + this.keyboardHeight
			}
		},
		onLoad() {
			uni.onKeyboardHeightChange((res) => {
				if (res.height > 0) {
					// 键盘弹起
					console.log('键盘弹起，高度:', res.height);
					this.bottomHeight = res.height
					this.bottomHeight1 = res.height
					// 可以在这里处理键盘弹起后的逻辑，比如调整布局
				} else {
					// 键盘收起
					console.log('键盘收起');
					this.bottomHeight = 10
					this.bottomHeight1 = 0
					// 可以在这里处理键盘收起后的逻辑
				}
			});
			
			// uni.onKeyboardHeightChange(res => {
			// 	//这里正常来讲代码直接写
			// 	//this.keyboardHeight=this.rpxTopx(res.height)就行了
			// 	//但是之前界面ui设计聊天框的高度有点高,为了不让键盘和聊天输入框之间距离差太大所以我改动了一下。
			// 	this.keyboardHeight = this.rpxTopx(res.height)
			// 	if (this.keyboardHeight < 0) this.keyboardHeight = 0;
			// });
			

			// this.getUserInfo()
		},
		onUnload() {
			// uni.offKeyboardHeightChange()
			
		},
		onShow() {
			this.getUser()
			this.getUserMessage()
			// this.msgList = []
		},
		onPageScroll(e) {
			this.onScroll(e)
		},
		onShareTimeline() {
			return {
				title: 'AI绘画',
				// query: 'item=' + this.info
			}
		},
		onShareAppMessage() {
			return {
				title: 'AI绘画',
				path: '/pages/ai-pat/index'
			}
		},
		methods: {
			getUserMessage() {
				getRefreshUser().then(user => {
					console.log('user', user)
					const { is_draw_member, free_num } = user.data
					this.isDrawMember = is_draw_member
					this.freeNum = free_num
				})
			},
			handleInput() {
				this.preChatMsg = this.chatMsg
			},
			handleBlur(e) {
				this.preChatMsg = this.chatMsg
				console.log('defrfr',this.preChatMsg, this.chatMsg)
			},
			// 返回
			returnPage() {
				uni.navigateBack()
			},
			onScroll(e) {
				console.log('e', e)
				const scrollTop = e.scrollTop
				const threshold = 10
				const navBar = uni.createSelectorQuery().select('.nav-bar')
				if (scrollTop > threshold) {
					this.bcg = '#FCE6DE'
				} else {
					this.bcg = 'transparent'
				}
			},
			getUser() {
				const accessToken = uni.getStorageSync('acctoken')
				const openid = uni.getStorageSync('openid')
				let useStr = {
					"access_token": accessToken,
					"appid": '073820240321128890',
					"openid": openid
				}
				console.log('useStr', useStr)
				getUserInfo(useStr).then(res => {
					console.log('res', res)
					const { portrait } = res
					this.headimg = portrait
				})
			},
			
			lookImg(url){
				this.imgUrl=url
			},
			toggle(type, size) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type);
				this.bottom = true
				if (size == 'size') {
					this.imageType = '尺寸';
					this.showSize = true;
				} else {
					this.imageType = '张数';
					this.showSize = false
				}
			},
			// 选择张数
			sliderChange(e) {
				console.log('value 发生变化：' + e.detail.value)
				this.value = e.detail.value
				this.number = e.detail.value;
				// this.$refs.popup.close();
			},
			
			// 减少张数
			handleMinus() {
				if(this.value > 1) {
					this.value -= 1
				} else {
					uni.showToast({
						title: '已经是最小值了',
						icon: 'none'
					})
				}
				this.number = this.value;
			},
			
			// 增加张数
			handlePlus() {
				if(this.value < 4) {
					this.value += 1
				} else {
					uni.showToast({
						title: '已经是最大值了',
						icon: 'none'
					})
				}
				this.number = this.value;
			},

			// 选择尺寸
			handleType(item, index) {
				this.actived = index;
				this.sizeText = item.text;
				this.imgWidth = item.width / 2;
				this.imgHeight = item.height / 2;
				this.size = item.value;
				this.imageUrl = item.name
				this.$refs.popup.close();
			},
			// 选择风格
			handleStyle(item, index) {
				this.styleActive = index;
				this.style = item.value;
			},
			focus() {
				this.scrollToBottom()
			},
			blur() {
				this.scrollToBottom()
			},
			// px转换成rpx
			rpxTopx(px) {
				let deviceWidth = uni.getSystemInfoSync().windowWidth
				let rpx = (750 / deviceWidth) * Number(px)
				return Math.floor(rpx)
			},
			// 监视聊天发送栏高度
			sendHeight() {
				setTimeout(() => {
					let query = uni.createSelectorQuery();
					query.select('.send-msg').boundingClientRect()
					query.exec(res => {
						this.bottomHeight = this.rpxTopx(res[0].height)
					})
				}, 10)
			},
			// 滚动至聊天底部
			scrollToBottom(e) {
				setTimeout(() => {
					let query = uni.createSelectorQuery().in(this);
					query.select('#scrollview').boundingClientRect();
					query.select('#msglistview').boundingClientRect();
					query.exec((res) => {
						if (res[1].height > res[0].height) {
							this.scrollTop = this.rpxTopx(res[1].height - res[0].height)
						}
					})
				}, 15)
			},
			// 发送消息
			handleSend(type) {
				if (!uni.getStorageSync('apiticket')) {
					uni.showModal({
						title: "提示",
						content: "请先登录",
						success(res) {
							if (res.confirm) {
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/login/index",
									})
								}, 1000);
							}
						},
					});
					return
				}

				this.percent = 0
				this.percents = 0
				this.$refs.jindutiao.drawCircle(this.percent)
				//如果消息不为空
				if (this.preChatMsg !== '') {
					let obj = {
						botContent: "",
						userContent: this.preChatMsg,
						image: ''
					}
					this.msgList.push(obj);
					this.getImgDraw(type); // 图片
					this.scrollToBottom();
				} else {
					uni.showToast({
						title: '请输入关键词',
						duration: 2000,
						icon: 'error'
					});
				}

			},
			// 生成图片
			getImgDraw(type) {
				let param = {
					model: 1,
					prompt: this.preChatMsg,
					style: this.style,
					size: this.size,
					n: this.number
				}
				// 生成图片
				drawPaint(param).then(res => {
					console.log('res', res)
					const {
						task_id
					} = res.data
					this.taskId = task_id;
					this.getImg(type)
				}).catch(err => {
					console.log('errwww', err)
				});
			},
			// 获取图片地址
			getImg(type) {
				this.$refs.popup1.open(type);
				this.bottom = false
				if (this.percent < 0.9) {
					console.log()
					this.percent += 0.01
					this.percents += 1
					setTimeout(() => {
						console.log('this.$refs.circleProgress', this.$refs, this.$refs.jindutiao)
						this.$refs.jindutiao.drawCircle(this.percent)
					}, 1000)
				
					// this.$refs.jindutiao.drawCircle(this.percent)
				}
				let str = {
					task_id: this.taskId,
					prompt: this.preChatMsg
				}
				getDrawUrl(str).then(url => {
					console.log('url', url);
					const status = url.data.output.task_status;
					console.log('status', status)
					if (status == 'PENDING' || status == 'RUNNING') {
						console.log('hhhhhh')
						this.getImg()
					} else if (status == 'SUCCEEDED') {
						this.percent = 10
						this.percents = 100
						this.$refs.popup1.close();
						this.chatMsg = ''
						console.log('成功', url)
						this.moren = false
						const {
							results
						} = url.data.output;
						// this.recordList = results;
						let obj = {
							botContent: "fff",
							userContent: '',
							imageList: results,
							image: ''
						}
						console.log('results', uni.getStorageSync('portrait'))
						this.msgList.push(obj);
						this.getUserMessage()
						// this.getUserInfo()
					} else if (str.output.task_status == 'FAILED') {
						console.log('hhhhh')
						this.$refs.popup.close();
						this.percent = 0
						this.percents = 0
					} else {
						console.log('失败')
					}
				}).catch(err => {
					console.log(err)
					this.$refs.popup.close();
					// this.chatMsg = '';
					this.percent = 0
					this.percents = 0
					// uni.showToast({
					// 	title: '失败，请重试',
					// 	duration: 2000,
					// 	icon: 'error'
					// });
				})
			},
			// 历史记录
			getRecord() {
				getRecordList().then(res => {
					console.log('res', res);
					this.recordList = res.data.data
				}).catch(err => {
					uni.showToast({
						title: '失败',
						duration: 2000,
						icon: 'error'
					});
				})
			},
			// 分享
			shareImg(ele, index) {
				console.log('ele', ele.url)
				uni.showLoading({
					title: '请稍等...'
				})
				uni.downloadFile({
					url: ele.url, //分享的图片的链接
					success: (res) => {
						console.log('res', res)
						uni.hideLoading()
						uni.showShareImageMenu({
							path: res.tempFilePath,
							success: (re) => {
								console.log('分享', re)
								uni.showToast({
									title: '分享成功',
									icon: 'none'
								})
							},
							fail: (re) => {
								console.log({ fail: re })
							}
						})
					}
				})
			},
			// 保存
			saveImg(ele, index) {
				uni.showLoading({
					title: '请稍等...'
				})
				wx.downloadFile({
					url: ele.url, //分享的图片的链接
					success: (res) => {
						uni.hideLoading()
						console.log('res', res)
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.hideLoading()
								uni.showModal({
									title: '保存成功',
									content: '图片已成功保存到相册',
									showCancel: false
								});
							},
							complete(res) {
								uni.hideLoading()
								console.log(res);
							}
						});
					}
				})
				// this.preservationImg(ele.url)
			},
			preservationImg(img) {
				uni.showLoading({
					title: '请稍等...'
				})
				let that = this
				uni.authorize({
			        /* scope.writePhotosAlbum 类型是保存到相册 */
					scope: 'scope.writePhotosAlbum',
					success() {
			            /* 已授权进入 */
						/* 保存图片到相册方法方法 */
						console.log('img1', img)
						that.imgApi(img);
						uni.hideLoading()
					},
					complete(res) {
						/* 判断如果没有授权就打开设置选项让用户重新授权 */
					    uni.getSetting({
								success(res) {
									if (!res.authSetting['scope.writePhotosAlbum']) {
									 /* 打开设置的方法 */
										that.opensit();
										uni.hideLoading()
									}
								}
					    });
				    }
				});
			},
			imgApi(image) {
				console.log('image', image)
					/* 获取图片的信息 */
					uni.getImageInfo({
						src: image,
						success: function(image) {
							uni.hideLoading()
							/* 保存图片到手机相册 */
							uni.saveImageToPhotosAlbum({
								filePath: image.path,
								success: (re) => {
									console.log('re', re)
									uni.showModal({
										title: '保存成功',
										content: '图片已成功保存到相册',
										showCancel: false
									});
								},
							complete(res) {
								console.log(res);
							}
						});
					}
				});
			},

			opensit() {
				uni.showModal({
					content: '没有授权保存图片到相册,点击确定去允许授权',
					success: function(res) {
						if (res.confirm) {
							/* 打开设置的API*/
							uni.openSetting({
								success(res) {
									console.log(res.authSetting);
								}
							});
						} else if (res.cancel) {
							uni.showModal({
								cancelText: '取消',
								confirmText: '重新授权',
								content: '你点击了取消，将无法进行保存操作',
								success: function(res) {
									if (res.confirm) {
										uni.openSetting({
											success(res) {
												/* 授权成功 */
												console.log(res.authSetting);
											}
										});
									} else if (res.cancel) {
										console.log('用户不授权');
									}
								}
							});
						}
					}
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	
	movable-area {
		height: 100%;
		width: 100%;
		position: fixed;
		overflow: hidden;
	}
	
	movable-view image {
		width: 100%;
	}
	.look-box {
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		display: flex;
		align-items: center;

		.icon {
			position: absolute;
			top: calc(var(--window-top) + 20rpx);
			right: 10rpx;
		}

		image {
			width: 100%;
		}
	}

	.move-item:nth-child(1) {
		background-image: url(https://oss.aimlt.com/webui-static/aiyunyi-app/image/huihua-20240822100059.png);
		// background-image: url(https://oss.aimlt.com/webui-static/aiyunyi-app/image/huihua-20240822100059.png);
		// background-position: -125px -62px;
		// background-size: 516rpx 386rpx;
		background-position: -264rpx 0rpx;
		background-size: 522rpx 390rpx;
	}

	.move-item:nth-child(2) {
		background-image: url(https://oss.aimlt.com/webui-static/aiyunyi-app/image/huihua-20240822100059.png);
		background-position: -132rpx 0rpx;
		background-size: 522rpx 390rpx;
	}

	.move-item:nth-child(3) {
		background-image: url(https://oss.aimlt.com/webui-static/aiyunyi-app/image/huihua-20240822100059.png);
		// background-position: -264rpx 0rpx;
		// background-size: 522rpx 394rpx;
		background-position: -396rpx 0rpx;
		background-size: 522rpx 390rpx;
	}

	.move-item:nth-child(4) {
		background-image: url(https://oss.aimlt.com/webui-static/aiyunyi-app/image/huihua-20240822100059.png);
		// background-position: -396rpx 0rpx;
		// background-size: 522rpx 394rpx;
		background-position: 0rpx -132rpx;
		background-size: 516rpx 390rpx;
	}

	.move-item:nth-child(5) {
		background-image: url(https://oss.aimlt.com/webui-static/aiyunyi-app/image/huihua-20240822100059.png);
		// background-position: 0rpx -132rpx;
		// background-size: 516rpx 386rpx;
		background-position: -132rpx -132rpx;
		background-size: 520rpx 390rpx;
	}

	.move-item:nth-child(6) {
		background-image: url(https://oss.aimlt.com/webui-static/aiyunyi-app/image/huihua-20240822100059.png);
		// background-position: -132rpx -132rpx;
		// background-size: 520rpx 392rpx;
		background-position: -264rpx -132rpx;
		background-size: 520rpx 390rpx;
	}

	.move-item:nth-child(7) {
		background-image: url(https://oss.aimlt.com/webui-static/aiyunyi-app/image/huihua-20240822100059.png);
		// background-position: -264rpx -132rpx;
		// background-size: 520rpx 392rpx;
		background-position: -392rpx -132rpx;
		background-size: 520rpx 390rpx;
	}

	.move-item:nth-child(8) {
		background-image: url(https://oss.aimlt.com/webui-static/aiyunyi-app/image/huihua-20240822100059.png);
		// background-position: -392rpx -132rpx;
		// background-size: 520rpx 392rpx;
		background-position: 0rpx -264rpx;
		background-size: 520rpx 390rpx;
	}

	.move-item:nth-child(9) {
		background-image: url(https://oss.aimlt.com/webui-static/aiyunyi-app/image/huihua-20240822100059.png);
		// background-position: 0rpx -264rpx;
		// background-size: 520rpx 392rpx;
		background-position: -132rpx -262rpx;
		background-size: 520rpx 390rpx;
	}

	// .move-item:nth-child(10) {
	// 	background-image: url(https://oss.aimlt.com/webui-static/aiyunyi-app/image/huihua-20240822100059.png);
	// 	background-position: -132rpx -262rpx;
	// 	background-size: 520rpx 392rpx;
	// }

	$chatContentbgc: #C2DCFF;
	$sendBtnbgc: #4F7DF5;

	view,
	button,
	text,
	input,
	textarea {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/* 聊天消息 */
	.chat {

		.record {
			text-align: right;
			// float: right;
			color: #4F7DF5;
			font-size: #{$auxiliary-size};
			margin-bottom: 20rpx;
		}

		.topTabbar {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			display: flex;
			margin-top: 80rpx;
			justify-content: space-between;

			.icon {
				margin-left: 20rpx;
			}

			.text {
				margin: auto;
				font-size: 16px;
				font-weight: 700;
			}

			.button {
				width: 10%;
				margin: auto 20rpx auto 0rpx;
			}
		}

		.scroll-view {
			
			background-image: url('https://oss.aimlt.com/webui-static/aiyunyi-app/icon/duihua.png');
			background-size: 100% calc(100vh - 400rpx);
			background-repeat: no-repeat;
			background-position: center;
			
			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}

			// background-color: orange;
			// background-color: #F6F6F6;
			// margin-top: 40rpx;

			.record-list {
				margin: 0 20rpx;

				.record-img {
					border-radius: 20rpx;
				}

			}

			.chat-body {
				display: flex;
				flex-direction: column;
				// padding-top: 160rpx;
				padding-top: 40rpx;

				.self {
					justify-content: flex-end;
				}

				.item {
					display: flex;
					flex-wrap: wrap;
					padding: 23rpx 30rpx;
					// background-color: greenyellow;

					.right {
						background-color: $chatContentbgc;
					}

					.left {
						background-color: #FFFFFF;
					}

					// 聊天消息的三角形
					.right::after {
						position: absolute;
						display: inline-block;
						content: '';
						width: 0;
						height: 0;
						left: 100%;
						top: 10px;
						border: 12rpx solid transparent;
						border-left: 12rpx solid $chatContentbgc;
					}

					.left:nth-child(1) ::after {
						position: absolute;
						display: inline-block;
						content: '';
						width: 0;
						height: 0;
						top: 10px;
						right: 100%;
						border: 12rpx solid transparent;
						border-right: 12rpx solid #FFFFFF;
					}

					.content {
						position: relative;
						max-width: 500rpx;
						border-radius: 8rpx;
						word-wrap: break-word;
						padding: 20rpx;
						margin: 0 24rpx;
						border-radius: 5px;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 42rpx;
						margin-bottom: 20rpx;
						
						.moren-text {
							font-size: 28rpx;
						}
					}

					.avatar {
						display: flex;
						justify-content: center;
						width: 78rpx;
						height: 78rpx;
						border-radius: 50rpx;
						overflow: hidden;
						background: transparent;

						image {
							align-self: center;
						}

					}
				}
			}
		}

		/* 底部聊天发送栏 */
		.chat-bottom {
			width: 100%;
			// height: 100rpx;
			background: #F4F5F7;
			transition: all 0.1s ease;
			position: fixed;

			.send-msg {
				// display: flex;
				// align-items: flex-end;
				padding: 20rpx 30rpx;
				width: 100%;
				min-height: 450rpx;

				background: #fff;
				transition: all 0.1s ease;
			}

			.select {
				display: flex;
				justify-content: space-between;


				.size {
					display: flex;
					align-items: center;
					font-size: #{$text-size};
					color: #{$one-title-color};

					.size-img {
						display: flex;
						align-items: center;
						margin-left: 100rpx;

						.img-url {
							// width: 48rpx;
							// height: 48rpx;
							border-radius: 10rpx;
							margin-right: 20rpx;
						}

						.hengtu {
							margin-right: 10rpx;
						}
					}
				}
			}

			// .move-area {

			// overflow-x: scroll;
			.move-list {
				width: 100%;
				height: 130rpx;
				display: flex;
				overflow-x: scroll;

				.move-item {
					flex-shrink: 0;
					width: 130rpx;
					height: 100%;
					position: relative;
					margin-right: 10rpx;
					overflow: hidden;
					border-radius: 10rpx;

					.item-img {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}

					.move-text {
						position: absolute;
						bottom: 0rpx;
						left: 0rpx;
						width: 100%;
						height: 40rpx;
						text-align: center;
						font-size: 24rpx;
						line-height: 40rpx;
						color: #fff;
						background: rgba(51, 51, 51, 0.6);
					}
				}
			}

			// }


			.uni-textarea {
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
				// padding-bottom: 70rpx;
				
				// background-color: #fff;
				display: flex;
				width: 100%;
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				padding: 20rpx 32rpx;
				box-sizing: border-box;
				align-items: center;
				.inp {
					overflow-y: scroll;
					max-height: 160rpx;
					width: calc(100% - 160rpx);
				}
				
				::v-deep .u-textarea {
					padding: 30rpx;
				}
				// padding-bottom: 70rpx;
				// height: 180rpx;
				// textarea {
				// 	width: 500rpx;
				// 	min-height: 100rpx;
				// 	max-height: 500rpx;
				// 	background: #f1f1f1;
				// 	border-radius: 20rpx;
				// 	font-size: 32rpx;
				// 	font-family: PingFang SC;
				// 	color: #333333;
				// 	line-height: 100rpx;
				// 	padding: 5rpx 8rpx;
				//                 text-indent: 30rpx;
				// }
			}

			.send-btn {
				// display: flex;
				// align-items: center;
				// justify-content: center;
				// margin-bottom: 76rpx;
				// padding: 10rpx;
				text-align: center;
				margin-bottom: 4rpx;
				margin-left: 26rpx;
				width: 220rpx;
				// height: 90rpx;
				padding: 20rpx 6rpx;
				background: #{$main-color};
				border-radius: 50rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				// font-weight: 500;
				color: #FFFFFF;

				// line-height: 28rpx
			}

			.xiaohao {
				font-size: #{$explain-size};
				text-align: center;
				margin-left: 26rpx;
				color: #999;
			}
		}
	}

	.imge {
		width: 450rpx;
		height: 450rpx;
		border-radius: 16rpx;
	}

	.img-btn {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;

		.left-btn {
			display: flex;
		}

		.btn {
			color: #4ca7f5;
			border: none;
			background: transparent;
			font-size: #{$text-size};
			height: 50rpx;
			line-height: 50rpx;
		}

		::v-deep button:after {
			border: none;
		}

		.repeat {
			margin-left: 40rpx;
		}
	}

	.popup-content1 {
		padding: 15px;
		height: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		
		.circle-progress {
		}
		
	}

	.popup-content {
		padding: 15px;
		height: 400rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		// border: 1px solid red;

		.text {
			margin-top: 80%;
		}

		.order-type {
			.type-list {
				margin-top: 80rpx;
				display: flex;
				justify-content: space-around;


				.image-type {
					.type-text {
						font-size: #{$auxiliary-size};
						text-align: center;
					}

					.img {
						border-radius: 10rpx;
					}
				}

			}

			.num-type {
				margin-top: 80rpx;
				display: flex;
				justify-content: space-between;
				u-icon {
					width: 30rpx;
					border: 1px solid red;
				}
			}
		}
	}


	.line {
		border-bottom: 1px solid #f5f5f5;
		margin: 20rpx 0;
	}

	// .active {
	// 	border: 1px solid #{$main-color};
	// 	border-radius: 10rpx;
	// }

	.active1 {
		color: #{$main-color};
	}

	.styleActive {
		border: 1px solid #{$main-color};
	}

	.styleActive1 {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		background: #{$main-color};
	}
	
	
	.center-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		top: 80rpx;
		width: 100%;
		z-index: 5;
		background: transparent;
	}
	
	::v-deep .wx-slider-handle-wrapper {
		height: 16rpx;
	}
	::v-deep .wx-slider-value {
		font-size: 40rpx;
	}
</style>